<template>
    <div :class="isCollapse.isCollapse ? 'w-[65px]' : 'w-[200px]'"
        class="transition-all duration-300 bg-white  h-full flex flex-col" style="min-height: 100vh;">
        <button @click="isCollapse.toggleCollapse"
            class="flex items-center justify-center h-10 rounded-md bg-gray-100 hover:bg-gray-200 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 m-2">
            <span v-if="!isCollapse.isCollapse" class="flex items-center">
                <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 18l-6-6 6-6"></path>
                </svg>
            </span>
            <span v-else class="flex items-center">
                <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </span>
        </button>

        <el-menu :collapse="isCollapse.isCollapse" collapse-transition class="border-none bg-transparent flex-1">
            <el-menu-item index="1" @click="navigateTo('/manage/managePanel')"
                class="group flex items-center p-3 rounded-lg transition-colors duration-300 hover:bg-indigo-50 [&.is-active]:bg-indigo-100">
                <el-icon
                    class="mr-3 text-gray-500 transition-colors group-hover:text-indigo-600 group-[.is-active]:text-indigo-700">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-5 h-5">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605" />
                    </svg>
                </el-icon>
                <template #title>
                    仪表盘
                </template>
            </el-menu-item>

            <el-menu-item index="2" class="flex items-center" @click="navigateTo('/manage/manageVisitors')">
                <el-icon class="mr-2">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                </el-icon>
                <template #title>访客管理</template>
            </el-menu-item>

            <el-menu-item index="3" class="flex items-center" @click="navigateTo('/manage/manageArticles')">
                <el-icon class="mr-2">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                </el-icon>
                <template #title>文章管理</template>
            </el-menu-item>

            <el-menu-item index="4" class="flex items-center" @click="navigateTo('/manage/manageAccounts')">
                <el-icon class="mr-2">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                </el-icon>
                <template #title>账号管理</template>
            </el-menu-item>

            <el-menu-item index="5" class="flex items-center" @click="navigateTo('/manage/manageSeetings')">
                <el-icon class="mr-2">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                </el-icon>
                <template #title>系统设置</template>
            </el-menu-item>

            <el-sub-menu index="6" class="" @click="navigateTo('/manage/manageSeetings')">


                <template #title>
                    <el-icon class="mr-2">
                        <svg t="1749539664102" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2690">
                            <path
                                d="M938.666667 714.666667c-11.946667 0-21.333333 9.386667-21.333334 21.333333v10.666667c0 35.413333-28.586667 64-64 64H170.666667c-35.413333 0-64-28.586667-64-64v-469.333334C106.666667 241.92 135.253333 213.333333 170.666667 213.333333h256c11.946667 0 21.333333-9.386667 21.333333-21.333333S438.613333 170.666667 426.666667 170.666667H170.666667a106.666667 106.666667 0 0 0-106.666667 106.666666v469.333334A106.666667 106.666667 0 0 0 170.666667 853.333333h682.666666a106.666667 106.666667 0 0 0 106.666667-106.666666v-10.666667c0-11.946667-9.386667-21.333333-21.333333-21.333333z"
                                fill="#666666" p-id="2691"></path>
                            <path
                                d="M213.333333 490.666667h170.666667c11.946667 0 21.333333-9.386667 21.333333-21.333334s-9.386667-21.333333-21.333333-21.333333H213.333333c-11.946667 0-21.333333 9.386667-21.333333 21.333333s9.386667 21.333333 21.333333 21.333334zM213.333333 661.333333h512c11.946667 0 21.333333-9.386667 21.333334-21.333333s-9.386667-21.333333-21.333334-21.333333H213.333333c-11.946667 0-21.333333 9.386667-21.333333 21.333333s9.386667 21.333333 21.333333 21.333333zM567.893333 527.786667C609.706667 489.813333 647.253333 469.333333 725.333333 469.333333c76.8 0 156.586667 51.626667 194.133334 125.44 3.84 7.253333 11.093333 11.52 19.2 11.52 3.413333 0 6.826667-0.853333 9.813333-2.133333 10.666667-5.546667 14.506667-18.346667 9.386667-28.586667a278.229333 278.229333 0 0 0-148.053334-132.266666c38.826667-27.306667 64.853333-72.106667 64.853334-123.306667C874.666667 237.653333 807.68 170.666667 725.333333 170.666667s-149.333333 66.986667-149.333333 149.333333c0 48.64 23.466667 91.306667 59.306667 118.613333-38.4 11.52-67.413333 31.573333-96.426667 57.6-8.533333 8.106667-9.386667 21.333333-1.28 30.293334 8.106667 8.533333 21.76 9.386667 30.293333 1.28zM618.666667 320a106.666667 106.666667 0 0 1 213.333333 0 106.666667 106.666667 0 0 1-213.333333 0z"
                                fill="#666666" p-id="2692"></path>
                        </svg>
                    </el-icon>
                    <span>权限管理</span>
                </template>
                <el-menu-item index="6-1" class="flex items-center" @click="navigateTo('/manage/manageSeetings')">
                    <el-icon class="mr-2">
                        <svg t="1749539942047" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="8200" width="200" height="200">
                            <path
                                d="M531.5 374.6l2.8-2.8c28.1-53.2 28.1-112 0-165.2-28.1-50.4-84.1-81.3-142.9-81.3-28.1 0-56.1 8.5-81.3 22.4-42.1 22.4-70 58.9-81.3 103.8-11.2 42.1-2.8 84.1 19.6 120.4l2.8 5.6h-70v-2.8c-22.4-58.9-22.4-117.6 0-170.9 36.6-84 117.8-140 210.2-140 28.1 0 58.9 5.6 86.8 16.8C534.3 103 579.1 145.1 601.5 201c25.3 56.1 25.3 117.6 0 173.7v2.8h-70v-2.9z"
                                fill="#2C2C2C" p-id="8201"></path>
                            <path
                                d="M702 959c-9.6-5.4-18.8-11.4-27.7-17.7-25-17.7-51.1-40.1-73.2-63.3-25.3-26.3-45.9-53.7-59.9-79.3-13.9-25.5-21.2-49.5-21.2-69.6v-210l16.4 5.3c16.7 5.4 33 8.1 48.5 8.1 25.8 0 51.4-4.5 75.2-13.1-3-30.3-26.7-52.3-52.9-52.3-28.1 0-53.2 28.1-53.2 58.9v-30.7c0-33.6-25.3-58.9-53.2-58.9-28.1 0-53.2 28.1-53.2 58.9V301.9c0-33.6-25.3-58.9-53.2-58.9-28.1 0-50.4 28.1-50.4 58.9v341.7c0 16.8-11.2 30.8-28.1 30.8h-8.5l-75.7-33.6c-8.5-5.6-16.8-2.8-25.3-5.6-28.1-8.5-53.2 28.1-53.2 58.9 0 19.6 22.4 44.9 33.6 56.1l204.5 210.1h313.5c-1.1-0.3-1.9-0.8-2.8-1.3z"
                                fill="#2C2C2C" p-id="8202"></path>
                            <path
                                d="M716 651.6c-14.5 0-26.4 11.1-26.4 24.7S701.4 701 716 701s26.5-11.1 26.5-24.7c-0.1-13.6-11.9-24.7-26.5-24.7z m110.6-78.1c-40.9 0-79.6-12.4-110.6-33.9-31 21.5-69.7 33.9-110.6 33.9-14.2 0-29-2.5-44.1-7.3v162.7c0 15.1 5.8 33.6 16.6 53.6 11.3 20.8 28.2 43.1 48.8 64.6 18.4 19.2 39.7 37.6 60.2 52.1 7.2 5.2 14.8 9.9 22.4 14.3 2.9 1.7 6.5 1.6 9.5-0.1 7.8-4.6 15.3-9.6 22.7-14.9 22.1-15.8 42.7-33.5 61.8-52.9 21.4-21.8 38.8-44.2 50.5-64.7 11.2-19.6 17-37.7 17-52.2V566.1c-15.2 5-29.9 7.4-44.2 7.4z m-93.9 168.7v71c-0.1 8.6-7.7 15.6-16.9 15.5-9-0.1-16.4-6.9-16.5-15.5v-71c-31.8-7-55.6-33.9-55.6-65.9 0-37.3 32.5-67.7 72.3-67.7 39.9 0 72.3 30.3 72.3 67.7 0 31.9-23.8 58.8-55.6 65.9z"
                                fill="#2C2C2C" p-id="8203"></path>
                        </svg>
                    </el-icon>
                    <template #title>访客权限</template>
                </el-menu-item>

                <el-menu-item index="6-2" class="flex items-center" @click="navigateTo('/manage/manageSeetings')">
                    <el-icon class="mr-2">
                        <svg t="1749539942047" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="8200" width="200" height="200">
                            <path
                                d="M531.5 374.6l2.8-2.8c28.1-53.2 28.1-112 0-165.2-28.1-50.4-84.1-81.3-142.9-81.3-28.1 0-56.1 8.5-81.3 22.4-42.1 22.4-70 58.9-81.3 103.8-11.2 42.1-2.8 84.1 19.6 120.4l2.8 5.6h-70v-2.8c-22.4-58.9-22.4-117.6 0-170.9 36.6-84 117.8-140 210.2-140 28.1 0 58.9 5.6 86.8 16.8C534.3 103 579.1 145.1 601.5 201c25.3 56.1 25.3 117.6 0 173.7v2.8h-70v-2.9z"
                                fill="#2C2C2C" p-id="8201"></path>
                            <path
                                d="M702 959c-9.6-5.4-18.8-11.4-27.7-17.7-25-17.7-51.1-40.1-73.2-63.3-25.3-26.3-45.9-53.7-59.9-79.3-13.9-25.5-21.2-49.5-21.2-69.6v-210l16.4 5.3c16.7 5.4 33 8.1 48.5 8.1 25.8 0 51.4-4.5 75.2-13.1-3-30.3-26.7-52.3-52.9-52.3-28.1 0-53.2 28.1-53.2 58.9v-30.7c0-33.6-25.3-58.9-53.2-58.9-28.1 0-53.2 28.1-53.2 58.9V301.9c0-33.6-25.3-58.9-53.2-58.9-28.1 0-50.4 28.1-50.4 58.9v341.7c0 16.8-11.2 30.8-28.1 30.8h-8.5l-75.7-33.6c-8.5-5.6-16.8-2.8-25.3-5.6-28.1-8.5-53.2 28.1-53.2 58.9 0 19.6 22.4 44.9 33.6 56.1l204.5 210.1h313.5c-1.1-0.3-1.9-0.8-2.8-1.3z"
                                fill="#2C2C2C" p-id="8202"></path>
                            <path
                                d="M716 651.6c-14.5 0-26.4 11.1-26.4 24.7S701.4 701 716 701s26.5-11.1 26.5-24.7c-0.1-13.6-11.9-24.7-26.5-24.7z m110.6-78.1c-40.9 0-79.6-12.4-110.6-33.9-31 21.5-69.7 33.9-110.6 33.9-14.2 0-29-2.5-44.1-7.3v162.7c0 15.1 5.8 33.6 16.6 53.6 11.3 20.8 28.2 43.1 48.8 64.6 18.4 19.2 39.7 37.6 60.2 52.1 7.2 5.2 14.8 9.9 22.4 14.3 2.9 1.7 6.5 1.6 9.5-0.1 7.8-4.6 15.3-9.6 22.7-14.9 22.1-15.8 42.7-33.5 61.8-52.9 21.4-21.8 38.8-44.2 50.5-64.7 11.2-19.6 17-37.7 17-52.2V566.1c-15.2 5-29.9 7.4-44.2 7.4z m-93.9 168.7v71c-0.1 8.6-7.7 15.6-16.9 15.5-9-0.1-16.4-6.9-16.5-15.5v-71c-31.8-7-55.6-33.9-55.6-65.9 0-37.3 32.5-67.7 72.3-67.7 39.9 0 72.3 30.3 72.3 67.7 0 31.9-23.8 58.8-55.6 65.9z"
                                fill="#2C2C2C" p-id="8203"></path>
                        </svg>
                    </el-icon>
                    <template #title>用户权限</template>
                </el-menu-item>

                <el-menu-item index="6-3" class="flex items-center" @click="navigateTo('/manage/manageSeetings')">
                    <el-icon class="mr-2">
                        <svg t="1749539942047" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="8200" width="200" height="200">
                            <path
                                d="M531.5 374.6l2.8-2.8c28.1-53.2 28.1-112 0-165.2-28.1-50.4-84.1-81.3-142.9-81.3-28.1 0-56.1 8.5-81.3 22.4-42.1 22.4-70 58.9-81.3 103.8-11.2 42.1-2.8 84.1 19.6 120.4l2.8 5.6h-70v-2.8c-22.4-58.9-22.4-117.6 0-170.9 36.6-84 117.8-140 210.2-140 28.1 0 58.9 5.6 86.8 16.8C534.3 103 579.1 145.1 601.5 201c25.3 56.1 25.3 117.6 0 173.7v2.8h-70v-2.9z"
                                fill="#2C2C2C" p-id="8201"></path>
                            <path
                                d="M702 959c-9.6-5.4-18.8-11.4-27.7-17.7-25-17.7-51.1-40.1-73.2-63.3-25.3-26.3-45.9-53.7-59.9-79.3-13.9-25.5-21.2-49.5-21.2-69.6v-210l16.4 5.3c16.7 5.4 33 8.1 48.5 8.1 25.8 0 51.4-4.5 75.2-13.1-3-30.3-26.7-52.3-52.9-52.3-28.1 0-53.2 28.1-53.2 58.9v-30.7c0-33.6-25.3-58.9-53.2-58.9-28.1 0-53.2 28.1-53.2 58.9V301.9c0-33.6-25.3-58.9-53.2-58.9-28.1 0-50.4 28.1-50.4 58.9v341.7c0 16.8-11.2 30.8-28.1 30.8h-8.5l-75.7-33.6c-8.5-5.6-16.8-2.8-25.3-5.6-28.1-8.5-53.2 28.1-53.2 58.9 0 19.6 22.4 44.9 33.6 56.1l204.5 210.1h313.5c-1.1-0.3-1.9-0.8-2.8-1.3z"
                                fill="#2C2C2C" p-id="8202"></path>
                            <path
                                d="M716 651.6c-14.5 0-26.4 11.1-26.4 24.7S701.4 701 716 701s26.5-11.1 26.5-24.7c-0.1-13.6-11.9-24.7-26.5-24.7z m110.6-78.1c-40.9 0-79.6-12.4-110.6-33.9-31 21.5-69.7 33.9-110.6 33.9-14.2 0-29-2.5-44.1-7.3v162.7c0 15.1 5.8 33.6 16.6 53.6 11.3 20.8 28.2 43.1 48.8 64.6 18.4 19.2 39.7 37.6 60.2 52.1 7.2 5.2 14.8 9.9 22.4 14.3 2.9 1.7 6.5 1.6 9.5-0.1 7.8-4.6 15.3-9.6 22.7-14.9 22.1-15.8 42.7-33.5 61.8-52.9 21.4-21.8 38.8-44.2 50.5-64.7 11.2-19.6 17-37.7 17-52.2V566.1c-15.2 5-29.9 7.4-44.2 7.4z m-93.9 168.7v71c-0.1 8.6-7.7 15.6-16.9 15.5-9-0.1-16.4-6.9-16.5-15.5v-71c-31.8-7-55.6-33.9-55.6-65.9 0-37.3 32.5-67.7 72.3-67.7 39.9 0 72.3 30.3 72.3 67.7 0 31.9-23.8 58.8-55.6 65.9z"
                                fill="#2C2C2C" p-id="8203"></path>
                        </svg>
                    </el-icon>
                    <template #title>管理员权限</template>
                </el-menu-item>
            </el-sub-menu>

        </el-menu>
    </div>
</template>

<script lang="ts" setup>

import { managePanel } from '../../../ts/pinia';
import { useRouter } from 'vue-router';
let isCollapse = managePanel();//pinia读取管理面板是否展开
let router = useRouter() //使用路由

//进行路由跳转
function navigateTo(path: string) {
    router.push(path)
}

</script>

<style></style>